<a
  class="tw-block tw-h-full tw-max-w-72 tw-rounded-xl !tw-text-main tw-transition-all hover:tw-scale-105 hover:tw-no-underline focus:tw-outline-none focus:tw-ring focus:tw-ring-primary-700 focus:tw-ring-offset-2"
  [routerLink]="route"
>
  <bit-base-card class="tw-relative tw-overflow-hidden tw-h-full">
    <div
      class="tw-flex tw-h-28 tw-bg-background-alt2 tw-text-center tw-text-primary-300"
      [ngClass]="{ 'tw-grayscale': disabled }"
    >
      <div class="tw-m-auto tw-size-20 tw-content-center">
        <bit-icon [icon]="icon" aria-hidden="true"></bit-icon>
      </div>
    </div>
    <bit-card-content [ngClass]="{ 'tw-grayscale': disabled }">
      <h3 class="tw-mb-4 tw-text-xl tw-font-medium">{{ title }}</h3>
      <p class="tw-mb-0">{{ description }}</p>
    </bit-card-content>
    @if (requiresPremium) {
      <app-premium-badge class="tw-absolute tw-left-2 tw-top-2"></app-premium-badge>
    } @else if (requiresUpgrade) {
      <span bitBadge variant="primary" class="tw-absolute tw-left-2 tw-top-2">
        {{ "upgrade" | i18n }}
      </span>
    }
  </bit-base-card>
</a>
